<template>
    <div id="aCoursesList" class="bg-fa of">
        <!-- /课程详情 开始 -->
        <section class="container">
            <section class="path-wrap txtOf hLh30">
                <a href="/" title class="c-999 fsize14">首页</a>
                \
                <a href="/course" title class="c-999 fsize14">课程列表</a>
                \
                <span class="c-333 fsize14">{{course.title}}</span>
            </section>
            <div>
                <article class="c-v-pic-wrap" style="height: 357px;">
                    <section class="p-h-video-box" id="videoPlay">
                        <img
                            style="width:100%;height:100%"
                            :src="course.cover"
                            :alt="course.title"
                            class="dis c-v-pic"
                        />
                    </section>
                </article>
                <aside class="c-attr-wrap">
                    <section class="ml20 mr15">
                        <h2 class="hLh30 txtOf mt15">
                            <span class="c-fff fsize24">{{course.title}}</span>
                        </h2>
                        <section class="c-attr-jg" v-if="!isClassCourse">
                            <span class="c-fff">价格：</span>
                            <b class="c-yellow" style="font-size:24px;">￥{{course.price}}</b>
                        </section>
                        <section class="c-attr-mt c-attr-undis">
                            <span class="c-fff fsize14">主讲： {{course.teacherName}}&nbsp;&nbsp;&nbsp;</span>
                        </section>
                        <section class="c-attr-mt of" v-if="!isClassCourse">
                            <span class="ml10 vam" v-if="!isCanWatch">
                                <em class="icon18 scIcon"></em>
                                <a
                                    @click.prevent="collectCourse()"
                                    class="c-fff vam"
                                    title="收藏"
                                    href="#"
                                >收藏</a>
                            </span>
                            <span class="ml10 vam" v-else>
                                <em class="icon18 scIcon" style="background-position:0 -136px"></em>
                                <a
                                    @click.prevent="cancelCollect()"
                                    class="c-fff vam"
                                    title="取消收藏"
                                    href="#"
                                >取消收藏</a>
                            </span>
                        </section>
                        <section class="c-attr-mt">
                            <a
                                href="#"
                                title="立即观看"
                                class="comm-btn c-btn-3"
                                @click.prevent="buyOrWatch()"
                            >立即{{(course.price===0||isCanWatch||isClassCourse)?"观看":"购买"}}</a>
                        </section>
                    </section>
                </aside>
                <aside class="thr-attr-box">
                    <ol class="thr-attr-ol">
                        <li v-if="!isClassCourse">
                            <p>&nbsp;</p>
                            <aside>
                                <span class="c-fff f-fM">购买数</span>
                                <br />
                                <h6 class="c-fff f-fM mt10">{{course.buyCount}}</h6>
                            </aside>
                        </li>
                        <li>
                            <p>&nbsp;</p>
                            <aside>
                                <span class="c-fff f-fM">课时数</span>
                                <br />
                                <h6 class="c-fff f-fM mt10">{{course.lessonNum}}</h6>
                            </aside>
                        </li>
                        <li>
                            <p>&nbsp;</p>
                            <aside>
                                <span class="c-fff f-fM">浏览数</span>
                                <br />
                                <h6 class="c-fff f-fM mt10">{{course.viewCount}}</h6>
                            </aside>
                        </li>
                    </ol>
                </aside>
                <div class="clear"></div>
            </div>
            <!-- /课程封面介绍 -->
            <div class="mt20 c-infor-box">
                <article class="fl col-7">
                    <section class="mr30">
                        <div class="i-box">
                            <div>
                                <section id="c-i-tabTitle" class="c-infor-tabTitle c-tab-title">
                                    <a name="c-i" class="current" title="课程详情">课程详情</a>
                                </section>
                            </div>
                            <article class="ml10 mr10 pt20">
                                <div>
                                    <h6 class="c-i-content c-infor-title">
                                        <span>课程介绍</span>
                                    </h6>
                                    <div class="course-txt-body-wrap">
                                        <section class="course-txt-body">
                                            <p v-html="course.description"></p>
                                        </section>
                                    </div>
                                </div>
                                <!-- /课程介绍 -->
                                <div class="mt50">
                                    <h6 class="c-g-content c-infor-title">
                                        <span>课程大纲</span>
                                    </h6>
                                    <div class="videoListDiv test-1">
                                        <section class="mt20">
                                            <div class="lh-menu-wrap">
                                                <menu id="lh-menu" class="lh-menu mt10 mr10">
                                                    <ul>
                                                        <!-- 文件目录 -->
                                                        <li
                                                            class="lh-menu-stair"
                                                            v-for="chapter in course.chapters"
                                                            :key="chapter.id"
                                                        >
                                                            <a
                                                                href="javascript: void(0)"
                                                                :title="chapter.title"
                                                                class="current-1"
                                                            >
                                                                <em class="lh-menu-i-1 icon18 mr10"></em>
                                                                {{chapter.title}}
                                                            </a>
                                                            <ol
                                                                class="lh-menu-ol"
                                                                style="display: block;"
                                                            >
                                                                <li
                                                                    class="lh-menu-second ml30"
                                                                    v-for="video in chapter.children"
                                                                    :key="video.id"
                                                                >
                                                                    <a
                                                                        href="#"
                                                                        title
                                                                        @click.prevent="playVideo(video.videoSourceId,video.isFree)"
                                                                    >
                                                                        <span class="fr">
                                                                            <i
                                                                                v-if="video.isFree"
                                                                                class="free-icon vam mr10"
                                                                            >免费</i>
                                                                            <i
                                                                                v-else
                                                                                class="free-icon vam mr10"
                                                                                style="color:red"
                                                                            >付费</i>
                                                                        </span>
                                                                        <em
                                                                            class="lh-menu-i-2 icon16 mr5"
                                                                        >&nbsp;</em>
                                                                        {{video.title}}
                                                                    </a>
                                                                </li>
                                                            </ol>
                                                        </li>
                                                    </ul>
                                                </menu>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                                <!-- /课程大纲 -->
                            </article>
                        </div>
                    </section>
                </article>
                <aside class="fl col-3">
                    <div class="i-box">
                        <div>
                            <section class="c-infor-tabTitle c-tab-title">
                                <a title href="javascript:void(0)">主讲讲师</a>
                            </section>
                            <section class="stud-act-list">
                                <ul style="height: auto;">
                                    <li>
                                        <div class="u-face">
                                            <a :href="'/teacher/'+course.teacherId">
                                                <img
                                                    width="50"
                                                    height="50"
                                                    alt
                                                    :src="teacher.avatar"
                                                />
                                            </a>
                                        </div>
                                        <section class="hLh30 txtOf">
                                            <a
                                                class="c-333 fsize16 fl"
                                                :href="'/teacher/'+course.teacherId"
                                            >{{course.teacherName}}</a>
                                        </section>
                                        <section class="hLh20 txtOf">
                                            <span class="c-999">{{teacher.level===1?'高级讲师':'首席讲师'}}</span>
                                        </section>
                                    </li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </aside>
                <div class="clear"></div>
            </div>
        </section>
        <!-- /课程详情 结束 -->
    </div>
</template>

<script>
import { getCourseById } from "@/api/course/course";
import {
    isUserHasCourse,
    cancelCollect,
    collectCourse,
} from "@/api/course/courseCollect";
import { getById } from "@/api/ucenter/teacher";
import { addOrder } from "@/api/order/order";
import cookie from "js-cookie";
export default {
    data() {
        return {
            course: {},
            teacher: {},
            isCanWatch: false,
        };
    },
    computed: {
        isClassCourse() {
            return this.$route.query.isClassCourse;
        },
    },
    methods: {
        init() {
            getCourseById(this.$route.params.id, true, true).then(
                (response) => {
                    this.course = response.data.course;
                    getById(this.course.teacherId).then((response) => {
                        this.teacher = response.data.teacher;
                        this.isUserHasCourse();
                    });
                }
            );
        },
        isUserHasCourse() {
            isUserHasCourse(this.course.id).then((response) => {
                this.isCanWatch = response.data.has;
            });
        },
        playVideo(videoSourceId, isFree) {
            if (isFree || this.isCanWatch) {
                window.location.href =
                    "/player/" + videoSourceId + "?courseId=" + this.course.id;
            } else {
                this.$confirm("该课程需要付费", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        var token = cookie.get("edu_token");
                        if (!token) {
                            this.$confirm("请先登录", "提示", {
                                confirmButtonText: "确定",
                                cancelButtonText: "取消",
                                type: "warning",
                            })
                                .then(() => {
                                    window.location.href = "/login";
                                })
                                .catch(() => {});
                        } else {
                            this.createOrder();
                        }
                    })
                    .catch(() => {});
            }
        },

        buyOrWatch() {
            if (
                this.course.price === 0 ||
                this.isCanWatch ||
                this.isClassCourse
            ) {
                this.playVideo(
                    this.course.chapters[0].children[0].videoSourceId,
                    true
                );
            } else {
                var token = cookie.get("edu_token");
                if (!token) {
                    this.$confirm("请先登录", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(() => {
                            window.location.href = "/login";
                        })
                        .catch(() => {});
                } else {
                    this.$confirm("该课程需要支付", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(() => {
                            this.createOrder();
                        })
                        .catch(() => {});
                }
            }
        },
        cancelCollect() {
            if (this.course.price !== 0) {
                this.$confirm(
                    "该课程是付费课程取消收藏，再次观看将要收费，确定要继续吗？",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                )
                    .then(() => {
                        cancelCollect(this.course.id).then((response) => {
                            this.isCanWatch = false;
                        });
                    })
                    .catch(() => {});
            } else {
                cancelCollect(this.course.id).then((response) => {
                    this.isCanWatch = false;
                });
            }
        },
        collectCourse() {
            var token = cookie.get("edu_token");
            if (!token) {
                this.$confirm("请先登录", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        window.location.href = "/login";
                    })
                    .catch(() => {});
            } else {
                if (this.course.price === 0) {
                    collectCourse(this.course.id).then((response) => {
                        this.isCanWatch = true;
                    });
                } else {
                    this.$confirm("该课程需要支付", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(() => {
                            this.createOrder();
                        })
                        .catch(() => {});
                }
            }
        },
        createOrder() {
            addOrder(this.course.id, 1).then((response) => {
                let orderNo = response.data.orderNo;
                this.$router.push({ path: "/order/" + orderNo });
            });
        },
    },
    created() {
        this.init();
    },
    mounted() {},
};
</script>
<style scope>
.videoListDiv {
    width: 100%;
    height: 500px;
    overflow: scroll;
}
.test-1::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(52, 168, 240, 0.951);
    background: #868585;
}
.test-1::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(28, 88, 110, 0.937);
    border-radius: 10px;
    background: #ededed;
}
</style>
